<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdown 下拉菜单</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}

.el-dropdown{
	margin-left: 20px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">悬停在下拉菜单上以展开更多操作。</p>
	<p class="desc">通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。 默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。</p>
	<p class="desc">如果你想要在第4和第5个选项之间添加一个分隔符，你只需要为第5个选项添加一个 divider 的 CSS class。</p>
	<el-dropdown>
		<span class="el-dropdown-link">下拉菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item disabled>Action 4</el-dropdown-item>
				<el-dropdown-item divided>Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	
	<el-divider content-position="left">触发对象</el-divider><!-- =============================================================== -->
	<p class="desc">可使用按钮触发下拉菜单。</p>
	<p class="desc">设置 split-button 属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为 true 即可。</p>
	<div class="flex flex-wrap items-center">
		<el-dropdown>
			<el-button type="primary">下拉菜单1<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item>Action 1</el-dropdown-item>
					<el-dropdown-item>Action 2</el-dropdown-item>
					<el-dropdown-item>Action 3</el-dropdown-item>
					<el-dropdown-item>Action 4</el-dropdown-item>
					<el-dropdown-item>Action 5</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>&nbsp;
		<el-dropdown split-button type="primary" @click="handleClick">
			下拉菜单2
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item>Action 1</el-dropdown-item>
					<el-dropdown-item>Action 2</el-dropdown-item>
					<el-dropdown-item>Action 3</el-dropdown-item>
					<el-dropdown-item>Action 4</el-dropdown-item>
					<el-dropdown-item>Action 5</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
	
	<el-divider content-position="left">触发方式</el-divider><!-- =============================================================== -->
	<p class="desc">可以配置点击激活或者悬停激活。</p>
	<p class="desc">将 trigger 属性设置为 click 即可， 默认为 hover。</p>
	<el-dropdown>
		<span class="el-dropdown-link">悬停菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :icon="Icons.Plus">Action 1</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlusFilled">Action 2</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlus">Action 3</el-dropdown-item>
				<el-dropdown-item :icon="Icons.Check">Action 4</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CircleCheck">Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>&nbsp;&nbsp;
	
	<el-dropdown trigger="click">
		<span class="el-dropdown-link">点击菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :icon="Icons.Plus">Action 1</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlusFilled">Action 2</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlus">Action 3</el-dropdown-item>
				<el-dropdown-item :icon="Icons.Check">Action 4</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CircleCheck">Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>&nbsp;&nbsp;

	<el-dropdown trigger="contextmenu">
		<span class="el-dropdown-link">右击菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :icon="Icons.Plus">Action 1</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlusFilled">Action 2</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CirclePlus">Action 3</el-dropdown-item>
				<el-dropdown-item :icon="Icons.Check">Action 4</el-dropdown-item>
				<el-dropdown-item :icon="Icons.CircleCheck">Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">菜单隐藏方式</el-divider><!-- =============================================================== -->
	<p class="desc">可以通过 hide-on-click 属性来配置。</p>
	<p class="desc">下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性设置为 false 可以关闭此功能。</p>
	<el-dropdown :hide-on-click="false">
		<span class="el-dropdown-link">下拉菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item disabled>Action 4</el-dropdown-item>
				<el-dropdown-item divided>Action 5</el-dropdown-item>
				<el-dropdown-item divided>Action 6</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">指令事件</el-divider><!-- =============================================================== -->
	<p class="desc">点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。</p>
	<el-dropdown @command="handleCommand">
		<span class="el-dropdown-link">下拉菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item command="a">Action 1</el-dropdown-item>
				<el-dropdown-item command="b">Action 2</el-dropdown-item>
				<el-dropdown-item command="c">Action 3</el-dropdown-item>
				<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
				<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">下拉方法</el-divider><!-- =============================================================== -->
	<p class="desc">您可以手动使用 手动打开 或 手动关闭下拉菜单以打开或关闭</p>
	<div style="font-size: 14px"><p>打开(关闭)下拉菜单2将关闭(打开)下拉菜单1。</p></div>
	<div style="margin: 15px">
		<el-button @click="showClick">展开下拉菜单1</el-button>
		<el-button @click="d2Open">开2</el-button>
		<el-button @click="d2Close">关2</el-button>
	</div>
	<el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
		<span class="el-dropdown-link"> 下拉菜单1 </span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item disabled>Action 4</el-dropdown-item>
				<el-dropdown-item divided>Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-dropdown ref="dropdown2" trigger="contextmenu" @visible-change="handleVisible2">
		<span class="el-dropdown-link"> 下拉菜单2 </span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item disabled>Action 4</el-dropdown-item>
				<el-dropdown-item divided>Action 5</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">尺寸</el-divider><!-- =============================================================== -->
	<p class="desc">Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。</p>
	<p class="desc">使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small</p>
	<el-dropdown size="large" split-button type="primary">
		Large
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item>Action 4</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-dropdown split-button type="primary">
		Default
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item>Action 4</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-dropdown size="small" split-button type="primary">
		Small
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item>Action 1</el-dropdown-item>
				<el-dropdown-item>Action 2</el-dropdown-item>
				<el-dropdown-item>Action 3</el-dropdown-item>
				<el-dropdown-item>Action 4</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">自定义</el-divider><!-- =============================================================== -->
	<p class="desc">这是自定义的用法</p>
	<el-dropdown :hide-on-click="false" hide-timeout=500 max-height="300px" @visible-change="OpenOrClose">
		<el-button type="primary">下拉菜单1<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item><el-checkbox v-model="checks.f1" label="字段1"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f2" label="字段2"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f3" label="字段3"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f4" label="字段4"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f5" label="字段5"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f6" label="字段6"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f7" label="产品名称（申请人填写）"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f8" label="字段8"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f9" label="字段9"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f10" label="字段10"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f11" label="字段11"></el-checkbox></el-dropdown-item>
				<el-dropdown-item><el-checkbox v-model="checks.f12" label="字段12"></el-checkbox></el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>&nbsp;
	<el-button @click="showChecks">查看选择情况</el-button>
	<div style="height: 500px;"></div>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			checks: {
				f1: true,
				f2: false,
				f3: false,
				f4: true,
				f5: true,
				f6: true,
				f7: true,
				f8: true,
				f9: true,
				f10: true,
				f11: true,
				f12: true,
			},
		}
	},
	methods:{
		handleClick (){
			alert("handleClick");
		},
		handleCommand(command){
			this.$message.success(command);
		},
		showClick(){
			this.$refs.dropdown1.handleOpen();
		},
		d2Open(){
			this.$refs.dropdown2.handleOpen();
		},
		d2Close(){
			this.$refs.dropdown2.handleClose();
		},
		handleVisible2(visible){
			console.log(visible);
			if(visible){
				console.log("下拉菜单2展开了。。。");
			}else{
				console.log("下拉菜单2收起关闭了。。。");
			}
		},
		OpenOrClose(visible){
			console.log(visible);
			if(visible){
				console.log("我展开了。。。");
			}else{
				console.log("我收起关闭了。。。");
			}
		},
		showChecks(){
			console.log(this.checks);
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>